<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to EventNative</title>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Rubik:wght@500&family=Ubuntu+Mono&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css"/>
    <style type="text/css">
        pre.code {

            background-color: lightgray;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 20px;
            font-family: 'Ubuntu Mono', monospace;
            border-radius: 7px;
            margin-bottom: 1px;
        }

        p.inteceptors-config {
            padding-bottom: 20px;
            margin-top: 0px;
            font-family: 'Ubuntu Mono', monospace;
        }

        body {
            margin: auto;
            min-width: 800px;
            max-width: 50%;
            font-family: 'IMB Plex Sans', sans-serif;
        }

        h1 {
            font-family: 'Rubik', serif;
        }

		#tests {
			margin-top: 50px;
			margin-bottom: 0px;
			border: 1px solid #e0e0e0;
			border-radius: 15px;
			padding: 20px;
		}

		#tests h2 {
			margin-top: 0px;
			margin-bottom: 60px;
		}

		.test {
			margin-bottom: 30px;
		}

		.test:not(:last-child) {
			border-bottom: 1px solid #e0e0e0;
			padding-bottom: 30px;
		}

		.test.ok h3 {
			color: green;
		}

		.test.fail h3 {
			color: red;
		}

    </style>

	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="/t/inline.js?key=YOUR_API_KEY_HERE"></script>
    <script>

		function runTest(name, desc, code) {
			let resultStatus = true;
			let resultText = '';

			const writeSuccess = (text) => {
				resultStatus = true;
				resultText = text;
			};
			const writeError = (text) => {
				resultStatus = false;
				resultText = text;
			};

			try {
				code(writeSuccess, writeError);
			} catch (err) {
				writeError(err);
			}

			const t = $('<div class="test"></div>');
			
			if (resultStatus) {
				t.addClass('ok');
			} else {
				t.addClass('fail');
			}

			t.append('<h3>' + name + '</h3>');
			if (desc) {
				t.append('<p>' + desc + '</p>');
			}
			t.append('<em>' + resultText + '</em>');

			$('#tests').append(t);

			if (!resultStatus) {
				throw 'noop';
			}
		}

        document.addEventListener('DOMContentLoaded', () => {
            runTest('EventNative lib availability', '', (ok, fail) => {
				try {
					if (eventN) {
						ok('Library is available in global context');
					} else {
						fail('Library is not available in global context');
					}
				} catch (err) {
					fail('Library is not available in global context');
				}
			});

			runTest('User identification', '', (ok, fail) => {
				eventN.id({
					"name": "Man with No Name",
					"email": "thegoods@western.com",
					"internal_id": "6"
				}, true);
				ok('Sent successfully');
			});

			runTest('Track event', '', (ok, fail) => {
				eventN.track('product_page_view', {
					product_id: '1e48fb70-ef12-4ea9-ab10-fd0b910c49ce',
					product_price: 399,
					price_currency: 'USD'
				});
				ok('Sent successfully');
			});
        });
    </script>
</head>
	<p>
		<h1 align="center">
			<img
					src=""
					height="50"
			/>
			Welcome to EventNative!
		</h1>
		<br />
		<b>If you see this page, the <b></b><a href="https://github.com/jitsucom/jitsu/server">EventNative</a></b> sever is successfully installed and working.
	</p>

	<div id="tests">
		<h2>Tests</h2>

	</div>
	<br /><br />
	
<p>Links:</p>
<ol>
    <li><a href="https://github.com/jitsucom/jitsu/server">GitHub</a></li>
    <li><a href="https://docs.eventnative.org">Documentation</a></li>
</ol>

<p></p><i>Thank you for using EventNative!</i></p>


</body>
</html>